<template>
    <card dis-hover>
        <tabs v-model="type" :animated="false">
            <tab-pane label="未读消息" name="0"></tab-pane>
            <tab-pane label="已读消息" name="1"></tab-pane>
            <tab-pane label="消息推送" name="2">
                <split class="split-wrap" v-model="split">
                    <div slot="left" class="left-split-pane">
                        <i-button type="primary" long @click="handlerSelectUser">选择用户</i-button>
                        <div class="select-user-wrap">
                            <div class="user-list">
                                <div class="user-item" v-for="v in checkedUserList" @click="handlerSelect(v)">
                                    <img :src="$root.FILE_PATH + v.headImg  " class="avatar" alt="">
                                    <div class="info">
                                        <span class="name">{{v.name}}</span>
                                        <div>
                                            <span class="sex">{{v.sex}}</span>
                                            <span class="state">{{v.state === '1' ? '' : '封禁'}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div slot="right" class="right-split-pane">
                        <i-form :label-width="90"
                                :model="form"
                                ref="form"
                                :rules="rules">
                            <form-item label="消息标题" prop="title">
                                <i-input v-model="form.title" placeholder="请填写消息名称"></i-input>
                            </form-item>
                            <form-item label="消息类型" prop="type">
                                <i-select v-model="form.type">
                                    <i-option value="0" label="系统消息"></i-option>
                                </i-select>
                            </form-item>
                            <form-item label="消息内容" prop="content">
                                <editor z-index="1" v-model="form.content" height="200px"></editor>
                            </form-item>
                            <form-item>
                                <i-button :loading="loading" @click="handlerSubmit" type="primary">
                                    {{loading ? '发布中，请稍后' : '提交发布'}}
                                </i-button>
                            </form-item>
                        </i-form>
                    </div>
                </split>
            </tab-pane>
        </tabs>
        <div class="message-wrap-list">
            <div class="item">
            </div>
        </div>
        <select-user ref="User"></select-user>
    </card>
</template>
<script>
    import selectUser from '@/components/select-user'
    import editor from '@/components/editor'

    export default {
        name: "Message",
        data() {
            return {
                type: '2',
                split: 0.25,
                checkedUserList: [],
                form: {
                    type: '0',
                    title: '',
                    content: '',
                },
                rules: {
                    title: [
                        {required: true, min: 5, message: '消息标题最少五个字符', trigger: 'blur'},
                    ],
                    content: [
                        {required: true, min: 5, message: '消息内容最少五个字符', trigger: 'blur'},
                    ],
                }
            }
        },
        created() {
            // console.log(selectUser)
        },
        mounted() {
        },
        methods: {
            handlerSelectUser() {
                this.$refs['User'].open(e => {
                    console.log(e)
                    this.checkedUserList = e
                })
            },
            handlerSubmit() {
                this.$refs.form.validate(async (valid) => {
                    if (valid) {

                    }
                })
            }
        },
        components: {selectUser, editor}
    }
</script>
<style lang="scss" scoped>
    .split-wrap {
        border: 1px solid #ccc;
        height: calc(100vh - 175px);

        .left-split-pane {
            padding: 10px;
            height: 100%;
            overflow-y: auto;

            .select-user-wrap {
                padding-top: 10px;

                .user-item {
                    margin-left: 0;
                }
            }
        }

        .right-split-pane {
            @extend .left-split-pane;
        }
    }
</style>
